<!-- wyf 2022-5-7 -->
<template>
  <a-rate
    v-model:value="value1"
    :character="character"
    :allow-clear="allowClear"
    :allow-half="allowHalf"
    :autofocus="autofocus"
    :count="count"
    :disabled="disabled"
    :tooltips="tooltips"
    :min="min"
    :max="max"
  >
    <template v-if="$slots.character" #character>
      <slot name="character" />
    </template>
    <slot />
  </a-rate>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { Rate, message } from 'ant-design-vue'
export default defineComponent({
  name: 'ZRate',
  components: {
    ARate: Rate
  },
  props: {
    value: {
      type: Number,
      default: undefined
    },
    min: {
      type: Number,
      default: undefined
    },
    max: {
      type: Number,
      default: undefined
    },
    allowClear: {
      type: Boolean,
      default: true
    },
    allowHalf: {
      type: Boolean,
      default: false
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    character: {
      type: String,
      default: undefined
    },
    count: {
      type: Number,
      default: 5
    },
    disabled: {
      type: Boolean,
      default: false
    },
    tooltips: {
      type: Array,
      default: undefined
    }
  },
  setup(props, _ref) {
    const value1 = computed({
      get() {
        return props.value
      },
      set(val) {
        _ref.emit('update:value', val)
      }
    })
    return {
      value1
    }
  },
  watch: {
    value1(newval, oldval) {
      if (this.min && this.max) {
        if (newval < this.min) {
          message.warning('所选值不得小于最小值')
          this.value1 = oldval
        } else if (newval > this.max) {
          message.warning('所选值不得大于最大值')
          this.value1 = oldval
        }
      } else if (this.min && !this.max && newval < this.min) {
        message.warning('所选值不得小于最小值')
        this.value1 = oldval
      } else if (this.max && !this.min && newval > this.max) {
        message.warning('所选值不得大于最大值')
        this.value1 = oldval
      }
    }
  }
})
</script>
